<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
                <meta name="viewport" content="width=device-width, initial-scale=1">
                    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
                    <title>Bootstrap 101 Template</title>
                    
                    <!-- Bootstrap -->
                    <link href="css/bootstrap.min.css" rel="stylesheet">
                        <style type="text/css">
                            .mainbody{
                                background-color:#ececec;
                            
                            
                            }
                        .title{
                            margin-left:50px;
                            margin-bottom:10px;
                            margin-top:20px;
                        }
                        
                        .login{
                            width:300px;
                            margin-left:auto;
                            margin-right:auto;
                            margin-bottom:20px;
                        }
                        .Logbtn{
                            width:50px;
                            margin-top:10px;
                            margin-left:auto;
                            margin-right:auto;
                            margin-bottom:30px;
                        }
                        .loginDiv{
                            background-color:white;
                            margin-top:100px;
                            margin-bottom:200px;
                            width:40%;
                            border:2px solid #efefef;
                            border-radius:25px;
                        }
                        </style>
                        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
                        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
                        <!--[if lt IE 9]>
                         <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
                         <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
                         <![endif]-->
                        </head>
    <body>
        
        <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">Login</a>
                </div>
                
                <!-- Collect the nav links, forms, and other content for toggling -->
                
            </div><!-- /.container-fluid -->
        </nav>
       
            
            <div class="container-fluid mainbody">
                
                <div class="container loginDiv">
                    <div class="title">
                        <i class="glyphicon glyphicon-user"></i>
                        <span>登陆</span>
                    </div><!--title-->
                    
                    <div class="input-group login">
                        <input type="text" class="form-control" placeholder="UserName" aria-describedby="basic-addon1">
                    </div><!--login-->
                    
                    <div class="input-group login">
                        <input type="text" class="form-control" placeholder="Password" aria-describedby="basic-addon1">
                    </div><!--login-->
                    
                    <div class="Logbtn">
                        <button class="btn btn-default" type="button">登陆</button>
                    </div><!--Logbtn-->
                    
                </div><!--loginDiv-->
                
            </div><!--mainbody-->
            
      
        
        
        
        
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>